<template>
  <div class="box">
    <!-- 我的 -->
    <div class="wd" @click="wd">我的</div>
    <!-- 文字图片 -->
    <div class="shop">
      <img src="../assets/img/7.png" width="100%" alt="" />
    </div>
    <div class="w">
      <img src="../assets/img/26.png" width="100%" height="100%" alt="" />
    </div>
    <div class="z"><img src="../assets/img/19.png" width="100%" alt="" /></div>
    <!-- 购物车图标按钮 -->
    <div class="tb" @click="n"><Car :number="Num"></Car></div>
    <!-- 购物车信息 -->
    <div class="gwc" v-if="flag">
      <!-- 退出 -->
      <div class="tui" @click="tui">退出</div>
      <!-- 全选框 -->
      <Full :fullState="Fullstate" @fullChange="getNewFull" v-if="car"></Full>
      <Counter
        v-for="(item, index) in car"
        :key="item.index"
        :title="item.model"
        :price="item.price"
        :img="item.img"
        :id="item.id"
        :count="item.count"
        :state="item.state"
        @state-change="getNewState"
      >
        <!-- 加减按钮 -->
        <Jsuan
          :index="index"
          :title="item.model"
          :num="item.count"
          @num-change="getNewCount($event, item)"
          @father="getindex"
        ></Jsuan>
      </Counter>
      <!-- 支付 总价 -->
      <Pay :price="amt" :numc="countnum" @zf="zf"></Pay>
    </div>
    <!-- 导航区 -->
    <div class="bt">
      <span @click="b">肌肤之钥</span>
      <span @click="c">圣罗兰</span>
      <span @click="d">汤姆福特</span>
      <span @click="e">迪奥</span>
      <span @click="f">香奈儿</span>
    </div>
    <!-- 搜索框 -->
    <div class="search">
      <el-input
        v-model="modelname.model"
        prefix-icon="iconfont icon-ai219"
        placeholder="请输入商品名称"
      ></el-input>
    </div>
    <!-- 搜索按钮 -->
    <div class="sbtn" ref="Sref" @click="search">搜索</div>
    <!-- 商品区 -->
    <div class="x">
      <!-- 商品区背景图片 -->
      <div class="hy" v-if="flag2">
        <img src="../assets/img/25.png" width="100%" height="100%" alt="" />
      </div>
      <Goods
        v-for="(item, index) in list"
        :key="item.index"
        :title="item.model"
        :img="item.imgurl"
        :sy="index"
        :price="item.price"
        @getIn="dex"
      >
      </Goods>
    </div>
  </div>
</template>

<script>
import Goods from "./Goods.vue";
import Full from "./Fullstate.vue";
import Car from "./Car.vue";
import Counter from "./Counter.vue";
import Pay from "./Pay.vue";
import Jsuan from "./Jsuan.vue";
export default {
  components: {
    Goods,
    Full,
    Car,
    Counter,
    Pay,
    Jsuan,
  },
  computed: {
    // 计算已加购商品数量
    Num() {
      return this.car.reduce((t, item) => (t += item.count), 0);
    },
    // 动态计算出全选的状态是true还是false
    Fullstate() {
      return this.car.every((item) => item.state);
    },
    // 已勾选商品的总价格
    amt() {
      return this.car
        .filter((item) => item.state === true)
        .reduce((total, item) => (total += item.count * item.price), 0);
    },
    // 购物车商品总件数
    countnum() {
      return this.car
        .filter((item) => item.state)
        .reduce((t, item) => (t += item.count), 0);
    },
  },

  methods: {
    // 我的
    wd() {
      this.$router.push("/user");
    },
    // 得到子组件传来的索引并向购物车加入商品
    dex(e) {
      // 将索引所对应的商品数组中的商品赋值给变量goods
      const goods = this.list[e];
      // 将购物车数组的长度赋值给变量a
      const a = this.car.length;
      // 查找购物车中是否有型号和goods商品匹配的商品
      const res = this.car.find((v) => v.model === goods.model);
      if (!res) {
        // 如果没有则向购物车添加goods商品并增加数量count和id属性
        this.car.push({
          logo: goods.logo,
          state: goods.state,
          img: goods.imgurl,
          model: goods.model,
          price: goods.price,
          count: 1,
          id: a + 1,
        });
      } 
      // 如果有则该商品数量加一
      else {
        res.count += 1;
      }
    },

    // 得到复选框的状态
    getNewState(e) {
      // 更改购物车中id所匹配商品复选框的勾选状态
      this.car.some((item) => {
        if (item.id === e.id) {
          item.state = e.value;
          // 终止后续循环
          return true;
        }
      });
    },

    // 接收Fullstate子组件传递过来的全选按钮的状态
    getNewFull(e) {
      this.car.forEach((item) => {
        item.state = e;
      });
    },

    // 得到最新商品数量  item表示点击加减按钮时当前的商品
    getNewCount(e, item) {
      item.count = e;
    },

    //点击购物车弹出购物车信息
    n() {
      // 得到购物车长度
      const a = this.car.length;
      // 购物车长度若为0则隐藏 不为0显示
      if (a) {
        this.flag = true;
      }
    },
    // 点击退出隐藏购物车
    tui() {
      this.flag = false;
    },
    // 删除商品
    getindex(e) {
      // e表示传入的索引号  splice表示从当前索引号截取一个 返回截取后的数组
      this.car.splice(e, 1);
    },

    // 支付
    async zf() {
      // 选出已勾选商品
      const a = this.car.filter((item) => item.state);
      // 重新赋值给购物车
      this.car = a;
      // 判断是否勾选商品
      if (!this.car.length) return this.$message.error("请选择支付商品！");
      // 设置时间格式
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var dates = date.getDate();
      // 为每个商品添加购买时间
      for (var i = 0; i < this.car.length; i++) {
        this.shop2.imgurl = this.car[i].img;
        this.shop2.title =
          this.car[i].logo +
          "-" +
          this.car[i].model +
          "-" +
          this.car[i].count +
          "支" +
          "-" +
          year +
          "年 " +
          month +
          "月 " +
          dates +
          "日 ";

        this.shop2.price = this.car[i].price;
        this.shop2.username = window.sessionStorage.getItem("username");
        // 存储用户已购商品
        this.$http.post("/car2", this.shop2);
      }

      // 存储商品信息
      for (var i = 0; i < this.car.length; i++) {
        this.shop1.push(
          this.car[i].logo +
            "-" +
            this.car[i].model +
            "-" +
            this.car[i].count +
            "支"
        );
        this.shop.goods = this.shop1.join(",");
      }
      // 存储用户信息
      this.shop.username = window.sessionStorage.getItem("username");
      this.shop.tel = window.sessionStorage.getItem("tel");
      this.shop.place = window.sessionStorage.getItem("place");
      // 存储用户订单
      const { data: res } = await this.$http.post("/car", this.shop);
      if (res.status !== 200) {
        return this.$message.error("付款异常！请稍后重试！");
      } else {
        this.$message.success("付款成功！等待收货吧！");
        window.location.reload();
      }
    },

    //  搜索功能
    async search() {
      this.flag2 = false;
      const { data: res } = await this.$http.post("/search", this.modelname);
      if (res.status !== 200) return this.$message.error("没有相关商品！");
      this.list = [];
      const a = this.list.length;
      this.list.push({
        logo: res.message.logo,
        state: res.message.state,
        imgurl: res.message.imgurl,
        model: res.message.model,
        price: res.message.price,
        index: a + 1,
      });

      console.log(this.list);
    },

    // 点击对应导航显示对应商品
    async b() {
      this.flag2 = false;
      this.logo.logo = "肌肤之钥";
      const { data: res } = await this.$http.post("/shop", this.logo);
      this.list = res.msg;
    },
    async c() {
      this.flag2 = false;
      this.logo.logo = "圣罗兰";
      const { data: res } = await this.$http.post("/shop", this.logo);
      this.list = res.msg;
    },
    async d() {
      this.flag2 = false;
      this.logo.logo = "汤姆福特";
      const { data: res } = await this.$http.post("/shop", this.logo);
      this.list = res.msg;
    },
    async e() {
      this.flag2 = false;
      this.logo.logo = "迪奥";
      const { data: res } = await this.$http.post("/shop", this.logo);
      this.list = res.msg;
    },
    async f() {
      this.flag2 = false;
      this.logo.logo = "香奈儿";
      const { data: res } = await this.$http.post("/shop", this.logo);
      this.list = res.msg;
    },
  },
  data() {
    return {
      // 控制页面显示与隐藏
      flag2: true,
      // 搜索框
      modelname: {
        model: "",
      },
      // logo
      logo: {
        logo: "",
      },
      // 购物车数组
      car: [],
      // 控制购物车信息的显示和隐藏
      flag: false,
      // 商品展示数组
      list: [],
      // 存储购物数据
      shop: {
        username: "",
        tel: "",
        place: "",
        goods: "",
      },
      shop2: {
        username: "",
        imgurl: "",
        price: "",
        title: "",
      },
      // 工具
      shop1: [],
    };
  },
};
</script>

<style lang="less" scoped>
.wd {
  position: absolute;
  top: 40px;
  right: -290px;
  font-size: 12px;
  color: #b71c1c;
  border: 2px solid #b71c1c;
  border-radius: 10px;
  width: 60px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.wd:hover {
  cursor: pointer;
  color: #fff;
  background-color: #b71c1c;
}
.sbtn {
  cursor: pointer;
  position: absolute;
  top: 107px;
  left: 645px;
  width: 80px;
  text-align: center;
  height: 36px;
  line-height: 36px;
  border: 2px solid #b71c1c;
  border-radius: 6px;
  color: #fff;
  background-color: #b71c1c;
}
.search {
  position: absolute;
  z-index: 10;
  top: 105px;
  left: 333px;
  width: 300px;
  border: 2px solid #b71c1c;
  border-radius: 6px;
}
.hy {
  position: absolute;

  width: 1080px;

  height: 500px;
}
.tui {
  position: absolute;
  border: 1px solid #b71c1c;
  border-radius: 6px;
  left: 380px;
  top: 10px;
  text-align: center;
  width: 60px;
  height: 40px;
  font-size: 14px;
  color: #b71c1c;
  line-height: 40px;
}
.tui:hover {
  cursor: pointer;
  background-color: #b71c1c;
  color: #fff;
}
.tb {
  display: inline-block;
}
.box {
  position: absolute;
  height: 640px;
}
.shop {
  width: 300px;
  height: 200px;
  position: absolute;
}
.w {
  right: 110px;
  top: 0px;
  width: 430px;
  height: 100px;
  position: absolute;
}
.z {
  right: 200px;
  top: 680px;
  width: 500px;
  height: 100px;
  position: absolute;
}

.gwc {
  overflow: auto;
  z-index: 12;
  position: absolute;
  background-color: #fff;
  top: 0px;
  right: 26px;
  width: 500px;
  height: 730px;
  border: 3px solid #b71c1c;
  border-radius: 6px;
}

.x {
  position: relative;
  top: -410px;
  right: -330px;
  overflow: auto;
  display: flex;
  width: 1080px;
  height: 500px;
  justify-content: start;
  flex-wrap: wrap;
  border: 0;
  border-radius: 10px;
  border: 4px solid #b71c1c;
}

.bt {
  position: relative;
  user-select: none;
  top: 90px;
}
span {
  display: block;
  width: 200px;
  height: 50px;
  text-align: center;
  margin-top: 56px;
  margin-left: 76px;
  line-height: 50px;
  color: #b71c1c;
  font-weight: 600;
  border: 2px solid #b71c1c;
  border-radius: 20px;
  background-color: #fff;
}
span:hover {
  cursor: pointer;
  color: #fff;
  background-color: #b71c1c;
}
</style>